<template>
  <a-spin :spinning="spinning">
    <a-button type="primary" icon="search" @click="initUI">测试</a-button>
    <div class="app-container">
      <div class="filter-container">
        <a-form-model ref="ruleForm" :model="formModel" layout="inline">
          <a-row v-for="(rowItem ,rowIndex) in formList.form" :key="rowIndex" :gutter="rowItem.gutter">
            <a-col v-for="(formItem,colIndex) in rowItem.colList" v-show="colShow[formItem.model]" :key="colIndex" :span="rowItem.span">
              <input-tpl-ui
                ref="modalFormTplUi"
                :form-item="formItem"
                :enum-data="enumData"
                :modal-fn-data="modalFn"
                :ui-page-url="uiPageUrl"
                :init-src-label="initSrcLabel"
                :rules="rules"
                :modal-form="formModel"
                :form-event="formEvent"
                :input-style="formItem.inputStyle"
                @changeEvent="inputChangeEvent"
                @clearEmpty="clearEmpty"
              />
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div>
        <tableTplList
          ref="tableTplList"
          :table-id="tableId"
          :table-echart-id="tableEchartId"
          :table-event="tableEvent"
          :table-obj-param="tableObjParam"
          :ui-page-url="uiPageUrl"
          :init-src-label="initSrcLabel"
          @tableChangeEvent="tableChangeEvent"
          @uiChangeEvent="uiChangeEvent"
          @openTableLoad="openTableLoad"
          @openTableDownLoad="openTableDownLoad"
          @openTableMenuLoad="openTableMenuLoad"
          @openTableMenuSelect="openTableMenuSelect"
          @openTableMenuDelete="openTableMenuDelete"
          @openGeneralModal="openGeneralModal"
          @processCustomRowOnClick="processCustomRowOnClick"
        />
        <!-- table区域-end -->
        <formTplModalTemplate ref="formTplModal" name="formTplModal" @reloadLoadData="reloadLoadData" />
        <uiModalTemplate ref="uiModal" @returnQuickSelectRows="returnQuickSelectRows" />
        <listAndListModalTemplate ref="listAndListModal" @returnQuickSelectRows="returnQuickSelectRows" />
        <treeAndListModalTemplate ref="treeAndListModal" @returnQuickSelectRows="returnQuickSelectRows" />
        <treeNodeModalTemplate ref="treeNodeModal" @returnQuickSelectRows="returnQuickSelectRows" />
        <stepsModalTemplate ref="stepsModal" @returnQuickSelectRows="returnQuickSelectRows" />
        <echartUiModalTemplate ref="echartModal" @returnQuickSelectRows="returnQuickSelectRows" />
      </div>
    </div>
  </a-spin>
  <!--</a-card>-->
</template>

<script>
import { getQuickSetLocalFormData, getQuickSetLocalListData, getInitLoadUiPageUrlDataParam, changePanelUiValKey, fetchExportData, loadUIMethod, getQuickSubmitRemoteData
  , openLoadGeneralModal, inputChangeEventControlObj, initFormUiData, getFormModelKeyData, getFnInputParam,
  initRules, changeFormRules, changeFormKeyRules,
  initColShow, changeColShow, changeColKeyShow,
  initFormFnParam, changeFormFnParam, changeFormKeyFnParam, initFormValue, changeFormValue,
  initForm, changeForm, initEnumParam, getEnumData, getRemoteUrlParam } from '@/utils/auth'
import tableTplList from './tableTplList'
import inputTplUi from './inputTplUi'
export default {
  name: 'FormUi',
  components: {
    inputTplUi,
    tableTplList,
    formTplModalTemplate: () => import('./formTplModal.vue'),
    uiModalTemplate: () => import('./uiModal.vue'),
    listAndListModalTemplate: () => import('./listAndListModal.vue'),
    treeAndListModalTemplate: () => import('./treeAndListModal.vue'),
    treeNodeModalTemplate: () => import('./treeNodeModal.vue'),
    stepsModalTemplate: () => import('./stepsModal.vue'),
    echartUiModalTemplate: () => import('./echartUiModal.vue')
  },
  props: ['S_PAGE_ID', 'S_PAGE_VER', 'S_PARTITION', 'pageUrlData', 'selectType'],
  data() {
    return {
      uidata: {}, // 初始化全部UI数据
      initSrcLabel: 'init',
      initFormKey: 'formList',
      initTableKey: 'formPanel',
      initUiVal: {},
      remoteDataSet: {},
      openReturnData: {}, // 开窗返回参数
      showTableTplKey: 'tableTplList',
      showTableNowKey: null,
      formModel: {},
      record: {},
      initData: {},
      enumData: {},
      enumParam: {},
      formList: [],
      formKey: [],
      modalFn: {},
      toolbarFn: {},
      modalFnData: {},
      formEvent: {},
      formShow: {},
      colShow: {},
      rowShow: {},
      rules: {},
      validatorRules: {},
      showObj: { test: true },
      disableSubmit: false,
      disabled: false,
      visible: false,
      formStepShow: false,
      stepCurrent: 0,
      stepInfo: {},
      stepList: [],
      stepListActiveKey: 1,
      formTabShow: false,
      tabListObj: {},
      tabList: [],
      tabListActiveKey: null,
      accept: 'image/png,image/jpg,video/mp4,txt,doc,docx,ppt,pptx',
      tableId: 'tableTplList',
      tableEchartId: 'tableEchartId',
      spinning: true,
      tableObjParam: { rowOnClick: false, rowOnDblClick: true, defalutSearchQuery: 'searchQuery', showEchart: true },
      parentRefOpen: {},
      openParam: {},
      localParam: {},
      uiPageUrl: {},
      tableExtProp: {},
      tableEvent: { update: 'openTableMenuUpdate', delete: 'openTableMenuDelete', insert: 'openTableMenuInsert',
        select: 'openTableMenuSelect', copy: 'openTableMenuCopy', detail: 'openTableMenuDetail',
        selectNode: 'openTableMenuSelectNode', load: 'openTableLoad', menuLoad: 'openTableMenuLoad',
        defalutSearchQuery: 'searchQuery',
        tableModal: 'openTableModal', menuModal: 'openTableMenuModal', generalModal: 'openGeneralModal', impModal: 'openImportFileDataToDBModal',
        setData: 'openSetDataTableModal', saveSearchForm: 'saveTableSearchForm',
        rowOnClick: 'processCustomRowOnClick', rowOnDblClick: 'processCustomRowOnDblClick' },
      formTplModal: 'formTplModal',
      searchFormParam: {},
      nowRow: {},
      loading: false,
      nowBtnItem: {},
      // 表头
      columns: [],
      dealApi: {
        page: { S_PAGE_ID: '', S_PAGE_VER: '' }
      },
      dealParam: {
        page: { S_DY_PARAM: [] }
      }
    }
  },
  /**    **/
  computed: {
  },
  watch: {
  },
  mounted() {
    if (this.pageUrlData !== undefined) {
      this.initSrcObj = this.pageUrlData.initSrcObj
    }
    this.clientWidth = document.body.clientWidth
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
    })
  },
  beforeRouteUpdate(to, from, next) {
    this.initUI()
    next()
  },
  beforeRouteLeave(to, from, next) {
    next()
  },
  created() {
    const _this = this
    _this.openParam = Object.assign({}, _this.openParam, _this.$route.query)
    _this.initUI()
  },
  methods: {
    inputChangeEvent(formItem) {
      const thisObj = this
      inputChangeEventControlObj(thisObj, formItem)
    },
    clearEmpty(item) {
      console.log('00000000000000', item)
    },
    initTableUi(data) {
      const thisObj = this
      thisObj.showTableNowKey = null
      thisObj.uidata = Object.assign({}, data)
    },
    changeTableUi(tplKey, param) {
      const thisObj = this
      const showKey = changePanelUiValKey(thisObj.uidata, tplKey, param)
      thisObj.changeTableUiKey(tplKey, showKey, param)
    },
    changeTableUiKey(tplKey, showKey, param) {
      // 做一个面板里面多个table数据切换
      const thisObj = this
      const initUiVal = thisObj.uidata[thisObj.initTableKey]
      thisObj.initFormUI(initUiVal, thisObj.initSrcLabel, param)
    },
    initFormUI(val, srcLabel, param) {
      const _this = this
      this.initUiVal = val
      this.initEnumParam()
      this.initColShow()
      this.initUiLabel(srcLabel)
      this.initRules()
      this.initForm()
      this.initFormValue()
      this.initFormFnParam(false)
      this.initTabList()
      this.initStepList()
      // this.tableTplListUiData = val
      // this.initFormTplModalUiData(val, srcLabel, param)
      this.spinning = false
      // this.clearUiData()
      initFormUiData(this, val, srcLabel)
      // initTabUiData(this, val)
      _this.initFormObjValue(param)
      _this.$nextTick(() => {
        _this.changeFormValue(param)
        _this.changeFormRules()
        // _this.formShowEvent(param)
        _this.changeColShow()
        _this.changeFormFnParam(_this.initSrcLabel)
        _this.initEnum(param)
        _this.changeTabListActiveKey()
        // setTimeout(() => {
        //   _this.clickTabsCallBack(_this.tabListActiveKey)
        // }, 10)
      })
    },
    initFormObjValue(record) {
      this.formModel = Object.assign({}, this.formModel, record)
    },
    initEnum(record) {
      const _this = this
      const urlKey = 'enum'
      const formKeyData = getFormModelKeyData(_this)
      const tmpData = Object.assign({}, this.openParam, _this.initData, formKeyData)
      const urlParam = getRemoteUrlParam(_this, urlKey, tmpData)
      const param = Object.assign({}, urlParam, this.enumParam)
      // let param = Object.assign({}, this.enumParam)
      console.log('0000000000000', param)
      _this.confirmLoading = true
      getEnumData(param).then((res) => {
        _this.confirmLoading = false
        _this.enumData = res.data.enumData
      })
    },
    initEnumParam() {
      const thisObj = this
      initEnumParam(thisObj)
    },
    initForm() {
      const thisObj = this
      initForm(thisObj)
    },
    changeForm(triggerObj, param) {
      const thisObj = this
      changeForm(thisObj, triggerObj, param)
    },
    initUiLabel(srcLabel) {
      console.log('初始化标签srcLabel#', srcLabel)
      if (undefined === srcLabel || srcLabel === null || srcLabel === '') {
        this.initSrcLabel = 'init'
      } else {
        this.initSrcLabel = srcLabel
      }
      if (this.initSrcLabel === 'detail') {
        this.disableSubmit = true
      } else {
        this.disableSubmit = false
      }
    },
    initRules() {
      // 开始初始化所有项目为必填
      const thisObj = this
      initRules(thisObj)
    },
    changeFormRules() {
      // 加载结束后,根据规则调整对应表单校验方式
      const thisObj = this
      changeFormRules(thisObj)
    },
    changeFormKeyRules(key) {
      // 单个变量校验规则调整设置
      const thisObj = this
      changeFormKeyRules(thisObj, key)
    },
    initColShow() {
      // 一开始初始化字段参数
      const thisObj = this
      initColShow(thisObj)
    },
    changeColShow() {
      // 设置初始加载表单读写参数
      const thisObj = this
      changeColShow(thisObj)
    },
    changeColKeyShow(key) {
      // 设置具体变量字段呈现
      const thisObj = this
      changeColKeyShow(thisObj, key)
    },
    initFormFnParam() {
      // 一开始初始化读写参数
      const thisObj = this
      initFormFnParam(thisObj, true)
    },
    changeFormFnParam(srcLabel) {
      // 设置初始加载表单读写参数
      const thisObj = this
      changeFormFnParam(thisObj, srcLabel)
    },
    changeFormKeyFnParam(key, srcLabel) {
      const thisObj = this
      changeFormKeyFnParam(thisObj, key, srcLabel)
    },
    initFormValue() {
      // 一开始初始化读写参数
      const thisObj = this
      initFormValue(thisObj)
    },
    changeFormValue(openParam) {
      // 设置初始加载表单读写参数
      const thisObj = this
      changeFormValue(thisObj, openParam)
    },
    changeTabListActiveKey() {
      const thisObj = this
      // formTabShow
      if (thisObj.initUiVal.tabs !== undefined && thisObj.initUiVal.tabs.length > 0) {
        thisObj.tabListActiveKey = thisObj.initUiVal.tabs[0].S_REF_PANEL_NEW_REF_ID
      }
    },
    clickTabsCallBack(key) {
      const thisObj = this
      if (key !== undefined) {
        this.tabListActiveKey = key
        thisObj.$nextTick(() => {
          thisObj.changeActiveTabData()
        })
      }
    },
    changeActiveTabData() {
      if (this.tabListActiveKey !== null) {
        this.$nextTick(() => {
          const thisObj = this
          const activeTab = thisObj.getActiveTabData()
          const tplKey = this.tabListActiveKey
          const formKeyData = getFormModelKeyData(this)
          const mergeParam = Object.assign({}, thisObj.openParam, thisObj.initData, formKeyData)
          const param = getFnInputParam(mergeParam, activeTab.refSetOpenVal)
          if (thisObj.$refs[tplKey] !== undefined) {
            thisObj.changeTableUi(tplKey, param)
          }
        })
      }
    },
    getActiveTabData() {
      if (this.tabList !== undefined) {
        for (const i in this.tabList) {
          const tab = this.tabList[i]
          if (this.tabListActiveKey === tab.S_REF_PANEL_NEW_REF_ID) {
            return tab
          }
        }
        return this.tabList[0]
      } else {
        return null
      }
    },
    initTabList() {
      const thisObj = this
      if (thisObj.initUiVal.tabs !== undefined && thisObj.initUiVal.tabs.length > 0) {
        thisObj.formTabShow = true
        this.tabList = thisObj.initUiVal.tabs
      }
    },
    onStepsChange(current) {
      this.stepCurrent = current
      console.log('....', this.stepCurrent)
    },
    initStepList() {
      const thisObj = this
      if (thisObj.initUiVal.steps !== undefined &&
        thisObj.initUiVal.steps.step1 !== undefined &&
        thisObj.initUiVal.steps.step1.stepList.length > 0) {
        thisObj.formStepShow = true
        this.stepInfo = thisObj.initUiVal.steps.step1
        this.stepList = thisObj.initUiVal.steps.step1.stepList
      }
      console.log('initStepList...', this.stepList)
    },
    tableChangeEvent(formItem, triggerObj, localParamDataSet, selectedRow) {
      const thisObj = this
      console.log('表格变化统一formItem.', formItem)
      console.log('表格变化统一事件接口.', triggerObj)
      console.log('表格变化统一事件接口 localParamDataSet.', localParamDataSet)
      console.log('表格变化统一事件接口 selectedRow.', selectedRow)
      // const changeOpenParam = this.openParam
      // changeOpenParam 做入参适配
      const changeOpenParam = localParamDataSet
      thisObj.tableChangeEventControlObj(formItem, triggerObj, changeOpenParam)
    },
    tableChangeEventControlObj(formItem, triggerObj, changeOpenParam) {
      const thisObj = this
      const I_TRIGGER_OBJ = triggerObj.i_TRIGGER_OBJ
      if (I_TRIGGER_OBJ === 7) {
        // 执行面板呈现规则
        thisObj.showTableIdKey = triggerObj.showKey
        thisObj.changeTableUi(thisObj.showTableIdKey, changeOpenParam)
      } else {
        console.log('表格变化统一控制事件接口.', triggerObj)
      }
    },
    uiChangeEvent(formItem, triggerObj, localParamDataSet, selectedRow) {
      console.log('ui change event...', triggerObj)
    },
    searchList() {
    },
    searchPage() {
    },
    initUI() {
      const _this = this
      const param = getInitLoadUiPageUrlDataParam(_this)
      _this.spinning = true
      loadUIMethod(param).then((res) => {
        _this.initTableUi(res.data.data)
        _this.spinning = false
        _this.$nextTick(() => {
          this.tableExtProp.selectType = this.selectType
          _this.changeTableUi(_this.showTableTplKey, _this.openParam)
        })
      })
    },
    openTableSearch(btnItem, record) {
      this.nowBtnItem = btnItem
      const selectedRecord = Object.assign({}, record)
      console.log('openTableSearch', record)
      this.$refs.tableTplList.tableQueryByParam(selectedRecord)
    },
    openTableMenuDelete(btnItem, record) {
      this.nowBtnItem = btnItem
      console.log('openTableMenuDelete', record)
    },
    openGeneralModal(btnItem, record) {
      this.nowBtnItem = btnItem
      const openRecord = Object.assign({}, this.openParam, this.searchFormParam, record, this.uiPageUrl)
      console.log('openGeneralModal组合综合参数.', openRecord)
      openLoadGeneralModal(btnItem, openRecord, this)
    },
    processCustomRowOnClick(record) {
      this.nowRow = record
      console.log('processCustomRowOnClick @@@@', record)
    },
    processCustomRowOnDblClick(record) {
      this.nowRow = record
      console.log('processCustomRowOnDblClick @@@@', record)
    },
    openTableMenuSelect(selected) {
      this.$emit('openTableMenuSelect', selected)
    },
    getTableId() {
    },
    reloadLoadData(returnData, modalKey, modalForm) {
      const key = 'tableTplList'
      if (modalKey === 'insert') {
        this.$refs[key].insertSuccess(this.nowBtnItem, returnData, modalKey, modalForm)
      } else if (modalKey === 'update') {
        this.$refs[key].updateSuccess(this.nowBtnItem, returnData, modalKey, modalForm)
      } else if (modalKey === 'remoteData') {
        this.$refs[key].remoteDataSuccess(this.nowBtnItem, returnData, modalKey, modalForm)
      } else {
        this.$refs[key].tableQueryByParam(modalForm)
      }
    },
    openTableLoad(record, modalKey) {
      const key = this.nowBtnItem.tableId
      const selectedRecord = Object.assign({}, record)
      this.$refs[key].tableQueryByParam(selectedRecord)
    },
    openTableMenuLoad(btnItem, record) {
      console.log('openTableMenuLoad', record)
      this.openTableDownSearch(record)
    },
    openTableDownLoadTemplate(btnItem, record) {
      console.log('下载模版', btnItem)
      console.log('下载模版记录', record)
    },

    openTableDownLoad(btnItem, record) {
      console.log('下载', btnItem)
      let param = {}
      if (undefined !== record) {
        param = Object.assign({}, record)
      }
      console.log('加载openTableMenuLoad', record)
      const refExport = btnItem.refExport
      param.refExportType = refExport.refExportType
      param.refExportRefId = refExport.refExportRefId
      param.refExportRefSrc = refExport.refExportRefSrc
      param.refExportRefKey = refExport.refExportRefKey
      param.refExportRefName = refExport.refExportRefName
      param.refExportPkId = refExport.refExportPkId
      param.refExportFile = refExport.refExportRefFile
      param.refExportUrlKey = refExport.refExportUrlKey
      param.refExportZip = refExport.refExportZip
      param.refExportObj = refExport.refExportObj
      param.refOpenTplId = refExport.refOpenTplId
      param.refExportPkId = refExport.refExportPkId
      param.viewKey = refExport.refExportType
      // console.log('_this.dealApi ', this.$refs[btnItem.tableId].dealApi)
      // console.log('_this.param.refExportUrlKey ', param.refExportUrlKey)
      // const params = Object.assign({}, record, param)
      const thisObj = this.$refs[btnItem.tableId]
      fetchExportData(thisObj, param.refExportUrlKey, {}, param)
    },
    returnQuickSelectRows(item, formItem) {
      // const extendParam = Object.assign({}, this.searchFormParam, this.openParam, this.nowRow, this.uiPageUrl)
      const refOpen = formItem.refOpen
      if (undefined !== refOpen) {
        let refReturnFn = refOpen.refReturnFn
        console.log('returnQuickSelectRows 回调数据:', item)
        if (undefined === refReturnFn || refReturnFn === '') {
          refReturnFn = 'returnQuickSetLocalFormData'
          console.log('回调函数未配置，执行默认表单设置returnQuickSetLocalFormData:')
        }
        this[refReturnFn](item, formItem)
      } else {
        console.log('returnQuickSelectRows 配置数据异常.')
      }
    },
    returnQuickSetLocalFormData(selectionRows, formItem) {
      // 设置本地临时表单数据
      const extendParam = Object.assign({}, this.searchFormParam, this.openParam, this.nowRow, this.uiPageUrl)
      const record = getQuickSetLocalFormData(selectionRows, extendParam, formItem, this)
      this.$refs[formItem.tableId].setTableSearchForm(record)
    },
    returnQuickSetLocalListData(selectionRows, formItem) {
      // 设置本地临时列表数据
      const extendParam = Object.assign({}, this.searchFormParam, this.openParam, this.nowRow, this.uiPageUrl)
      getQuickSetLocalListData(selectionRows, extendParam, formItem, this)
    },
    returnQuickSubmitRemoteData(selectionRows, formItem) {
      // 设置提交远程列表数据
      const extendParam = Object.assign({}, this.searchFormParam, this.openParam, this.nowRow, this.uiPageUrl)
      getQuickSubmitRemoteData(selectionRows, extendParam, formItem, this)
    }
  }
}
</script>
